<template>
  <div id="ranking-board">
    <div class="ranking-board-title">使用时间段排名</div>

    <el-row
      :gutter="24"
      type="flex"
      align="middle">
      <el-col :span="24">
        <dv-scroll-ranking-board
          style="height: 300px"
          :judge-width="true"
          :config="config" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'RankingBoard',
  data () {
    return {
      config: {
        carousel: 'page',
        waitTime: 5000,
        data: [
          {
            'name': '00:00-01:00',
            'value': 61239
          }, {
            'name': '01:00-02:00',
            'value': 10288
          }, {
            'name': '02:00-03:00',
            'value': 15038
          }, {
            'name': '03:00-04:00',
            'value': 11390
          }, {
            'name': '04:00-05:00',
            'value': 16172
          }, {
            'name': '05:00-06:00',
            'value': 82779
          }, {
            'name': '06:00-07:00',
            'value': 467162
          }, {
            'name': '07:00-08:00',
            'value': 769809
          }, {
            'name': '08:00-09:00',
            'value': 637757
          }, {
            'name': '09:00-10:00',
            'value': 458453
          }
          // {
          //   'name': '10:00-11:00',
          //   'value': 382758
          // }, {
          //   'name': '11:00-12:00',
          //   'value': 808685
          // }, {
          //   'name': '12:00-13:00',
          //   'value': 855889
          // }, {
          //   'name': '13:00-14:00',
          //   'value': 345272
          // }, {
          //   'name': '14:00-15:00',
          //   'value': 203673
          // }, {
          //   'name': '15:00-16:00',
          //   'value': 197650
          // }, {
          //   'name': '16:00-17:00',
          //   'value': 313815
          // }, {
          //   'name': '17:00-18:00',
          //   'value': 843541
          // }, {
          //   'name': '18:00-19:00',
          //   'value': 1212834
          // }, {
          //   'name': '19:00-20:00',
          //   'value': 772512
          // }, {
          //   'name': '20:00-21:00',
          //   'value': 437631
          // }, {
          //   'name': '21:00-22:00',
          //   'value': 307510
          // }, {
          //   'name': '22:00-23:00',
          //   'value': 196188
          // }, {
          //   'name': '23:00-24:00',
          //   'value': 99731
          // }
        ]
      }
    }
  }
}
</script>

<style lang="less">

  #ranking-board {
    box-shadow: 0 0 3px blue;
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    box-sizing: border-box;
    padding: 0px 30px;

    .ranking-board-title {
      font-weight: bold;
      height: 50px;
      display: flex;
      align-items: center;
      font-size: 20px;
    }

  }

</style>
